<template>
  <div class="my-table-container verticalTable">
    <!-- scrollbar-always-on -->
    <el-table
      ref="tableRef"
      v-loading="loading"
      :border="border"
      :size="size"
      :show-header="false"
      highlight-current-row
      :data="getTableData"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :max-height="maxHeight"
      :empty-text="$t('common.noData')"
    >
      <!-- :height:"height" -->
      <!-- 多选 start -->
      <el-table-column
        v-if="selection"
        type="selection"
        width="30"
        :fixed="selectionFixed"
        class-name="table-first"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in getHeader"
        :key="index"
        :fixed="item.fixed"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="showOverflowTooltip"
        align="center"
        :min-width="item.width"
      >
        <!-- 内容处理 start -->
        <template #default="scope">
          <!-- 插槽变成 -->
          <span v-if="item.slot && !!scope.row.slotName" class="table-td">
            <slot v-bind="scope" :name="scope.row.slotName"></slot>
          </span>
          <span v-else class="table-td">
            <span class="cell-content">
              {{
                !!scope.row[item.prop] || scope.row[item.prop] === 0
                  ? scope.row[item.prop]
                  : ""
              }}
            </span>
          </span>
        </template>
        <!-- 内容处理  end  -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref, computed, watch } from "vue";
import moment from "moment";
import { useI18n } from "vue-i18n";
import { getLanguageInfo } from "@/utils/common";
import { useSidebarStore } from "@/store/sidebar";
export default defineComponent({
  name: "MyTable",
  components: {},
  props: {
    vertiaclColumnObj: {
      type: Object,
      default: () => {},
    },
    border: {
      type: Boolean,
      default: true,
    },
    size: {
      // 頁面路由
      type: String,
      default: "large",
    },
    showOverflowTooltip: {
      type: Boolean,
      default: true,
    },
    height: {
      type: Number,
      default: 360,
    },
    maxHeight: {
      type: Number,
      default: 533.5,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    labelClassName: {
      type: String,
      default: "jumpTable",
    },
    // 多选相关 -- START
    selection: {
      type: Boolean,
      default: false,
    },
    selectionFixed: {
      type: Boolean,
      default: false,
    },
    handleSelectionChange: {
      type: Function,
      default: () => {},
    },
    // 多选相关 -- END
  },
  setup(props, context) {
    let sidebar = useSidebarStore();
    const { t, locale } = useI18n();
    const tableRef = ref(null);
    const getLabel = (item) => {
      //处理表头拼借变量含有value的第一个值
      if (Array.isArray(item)) {
        let flag = item.some((v) => v.hasOwnProperty("value"));
        if (item.length === 1) {
          if (!!item[0].value) {
            return item[0].value;
          } else {
            return t(item[0]);
          }
        } else {
          let arr;
          if (flag) {
            let i = item[0].value;
            arr = item.slice(1).map((v) => t(v));
            let str = getLanguageInfo(locale.value, arr);
            if (locale.value === "en-US") {
              return i + " " + str;
            } else {
              return i + str;
            }
          } else {
            arr = item.map((v) => t(v));
            let str = getLanguageInfo(locale.value, arr);
            return str;
          }
        }
      } else {
        return t(item);
      }
    };
    const getHeader = computed(() => {
      let hedaer = props.columns;
      let data = props.tableData;
      //第一行设置
      let titleColmn = {
        width: props.vertiaclColumnObj.firstColumnWidth,
        label: "title",
        fixed: props.vertiaclColumnObj.fixedIndex.includes(0),
        prop: "title",
      };
      let list = data.reduce(
        (pre, cur, index) => {
          let col = {
            width: props.vertiaclColumnObj.columnWidth,
            label: `value${index}`,
            fixed: props.vertiaclColumnObj.fixedIndex.includes(index + 1),
            prop: `value${index}`,
            slot: props.vertiaclColumnObj.slotName ? true : false,
          };
          return pre.concat(col);
        },
        [titleColmn]
      );
      return list;
    });
    const getTableData = computed(() => {
      let hedaer = props.columns;
      let data = props.tableData;
      let list = hedaer.map((item, i) => {
        let firstColumn = {
          title: getLabel(item.label),
        };
        //有行列index组成唯一下标
        let rs = data.reduce((pre, cur, index) => {
          let obj = {
            ["value" + index]: cur[item.prop],
          };
          return Object.assign(pre, obj);
        }, firstColumn);
        if (props.vertiaclColumnObj.slotIndex.includes(i)) {
          rs.slotName = "slot" + i;
        }
        return rs;
      });
      return list;
    });
    return {
      tableRef,
      getLabel,
      getHeader,
      getTableData,
    };
  },
});
</script>
<style scoped lang="scss">
.my-table-container {
  width: 100%;
  background-color: #fff;
  position: relative;
}

.table-td {
  font-size: 12px;
  color: #666666;
}

.el-table thead th {
  background: #f7f4ef !important;
}
.el-table .cell,
.el-table th div {
  padding-right: 0 !important;
}

.el-table thead th {
  background: #f7f4ef;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f7f4ef;
}

.table-first {
  text-align: center !important;
}

.cell-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  color: rgba(71, 71, 71, 1);
}
</style>
